<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item><router-link to="/home">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item><router-link to="/work-ticket">信息查询</router-link></a-breadcrumb-item>
      <a-breadcrumb-item>信息详情</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card>
      <a-form
        ref="formRef"
        :model="formState"
        @finish="onFinish"
        :rules="rules"
      >
      <input type="hidden" v-model="formState.id" name="id"/>
      <h2 style="text-align:center;font-weight: bold;">
        电力通信工作票
         <a-form-item label="请选择工作场所" name="formWorkTicketTypeCode">
          <a-select
            v-model:value="formState.formWorkTicketTypeCode"
            style="width: 240px"
            :options="workTicketType"
            @change="handleChange"
          >
          </a-select>
         </a-form-item>
      </h2>
        <a-row :gutter="24">
          <a-col :span="15">
            <a-form-item name="unitName">
              <template #label><b style="font-size: 15px;">单位</b></template>
              <a-input v-model:value="formState.unitName" maxlength="100"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item name="workTicketCode">
              <template #label><b style="font-size: 15px;">编号</b></template>
              <a-input v-model:value="formState.workTicketCode" maxlength="100"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="15">
            <a-form-item label="1.班组名称">
              <a-input v-model:value="formState.teamName" maxlength="100"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="工作负责人" name="workLeader">
              <a-input v-model:value="formState.workLeader" maxlength="100"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="zhtt-row">
          2.工作班人员（不包括工作负责人）
          <a-row :gutter="24">
            <a-col :span="19">
              <a-form-item>
                <a-input v-model:value="formState.shiftStaff"  maxlength="200"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-input prefix="共" suffix="人" v-model:value="formState.totalNumber"/>
            </a-col>
          </a-row>
        </div>
        <div class="zhtt-row">
          <a-form-item label="3.工作场所名称">
            <a-input v-model:value="formState.workspace"  maxlength="100"></a-input>
          </a-form-item>
        </div>
        <div class="zhtt-row">
          4.工作任务
          <table class="zhtt-table">
            <tr style="text-align: center;">
              <td style="width:40%;">工作地点及设备名称</td><td style="width:60%;">工作内容</td>
            </tr>
            <tr>
              <td>
                <a-input v-model:value="formState.dutyStation" maxlength="100"></a-input>
              </td>
              <td>
                <a-input v-model:value="formState.jobContent" maxlength="100"></a-input>
              </td>
            </tr>
          </table>
        </div>
        <div class="zhtt-row">
          5.计划工作时间：
          自<input class="zhtt-input" type="number" v-model="formState.planWorkStartYear" maxlength="4">年
          <input class="zhtt-input" type="number" v-model="formState.planWorkStartMonth" maxlength="2">月
          <input class="zhtt-input" type="number" v-model="formState.planWorkStartDate" maxlength="2">日
          <input class="zhtt-input" type="number" v-model="formState.planWorkStartHour" maxlength="2">时
          <input class="zhtt-input" type="number" v-model="formState.planWorkStartMinute" maxlength="2">分
          至<input class="zhtt-input" type="number" v-model="formState.planWorkEndYear" maxlength="4">年
          <input class="zhtt-input" type="number" v-model="formState.planWorkEndMonth" maxlength="2">月
          <input class="zhtt-input" type="number" v-model="formState.planWorkEndDate" maxlength="2">日
          <input class="zhtt-input" type="number" v-model="formState.planWorkEndHour" maxlength="2">时
          <input class="zhtt-input" type="number" v-model="formState.planWorkEndMinute" maxlength="2">分
        </div>
        <div class="zhtt-row">6.安全措施</div>
        <div class="zhtt-row">
          6.1 电气安全措施：<br/>
          <a-textarea :rows="4" v-model:value="formState.safetyMeasures" show-count :maxlength="255"/>
        </div>
        <div class="zhtt-row">
          6.2通信安全措施（应获得的授权，应验证的内容等，必要时可附页绘图说明）
          <div class="zhtt-row"><a-input></a-input></div>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="工作票签发人签名">
                <a-input maxlength="100"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-date-picker showTime placeholder="签名时间" format="YYYY-MM-DD HH:mm"/>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="工作负责人签名">
                <a-input maxlength="100"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-date-picker showTime placeholder="签名时间" format="YYYY-MM-DD HH:mm"/>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <div style="height:40px;">
        <div style="width:300px;margin:0 auto;">
          <a-affix :offset-bottom="10">
            <a-button type="primary" @click="onSubmitUpdate" v-if="formState.createTime">更新</a-button> &nbsp;&nbsp;
            <a-button type="primary" @click="onSubmit" v-if="!formState.createTime">保存</a-button> &nbsp;&nbsp;
            <a-button style="color:#1890ff" @click="goback">返回</a-button> &nbsp;&nbsp;
          </a-affix>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, UnwrapRef, ref } from 'vue'
import { workTicketType } from './js/work-ticket-dict'
import { WorkTicketModel, formStateValue } from './js/work-ticket-model'
import { WorkTicketApi } from './js/work-ticket-api'
import { message } from 'ant-design-vue'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
import { ResultModel } from '@/common/result.model'
export default defineComponent({
  data () {
    return {
      workTicketType
    }
  },
  mounted () {
    const id:string = this.$route.params.id as string
    if (!id) {
      WorkTicketApi.getWorkTicketyMaxId().then(response => {
        const workTicket: WorkTicketModel = response.data.data
        if (workTicket && workTicket.workTicketCode) {
          const codeStrs = workTicket.workTicketCode.split('-')
          if (this.formState.workTicketCode && codeStrs[2] === this.formState.workTicketCode.split('-')[2]) {
            let codeStr = ''
            if (codeStrs.length === 4) {
              let codeNum = +codeStrs[3]
              codeStrs[3] = ++codeNum + ''
              let len = 4 - codeStrs[3].length
              while (len-- > 0) {
                codeStr += '0'
              }
              codeStrs[3] = codeStr + codeStrs[3]
              this.formState.workTicketCode = codeStrs.join('-')
            }
          }
        }
      })
    } else {
      WorkTicketApi.getWorkTicketById(id).then(response => {
        const workTicket: WorkTicketModel = response.data
        Object.assign(this.formState, workTicket)
        this.formState.formWorkTicketTypeCode = workTicket.dutyStation
      })
    }
  },
  methods: {
    handleChange (event: string) {
      const item = workTicketType.find(v => v.value === event)
      if (item) {
        console.log(item)
        this.formState.workspace = item.workspace
        this.formState.dutyStation = item.label as string
        this.formState.safetyMeasures = item.safetyMeasures as string
      }
    },
    goback () {
      this.$router.push('/team/team')
    }
  },
  components: {
  },
  setup () {
    const defaltFormValue = JSON.parse(JSON.stringify(formStateValue))
    const formRef = ref()
    const formState: UnwrapRef<WorkTicketModel> = reactive(defaltFormValue)
    const formValue = toRaw(formState)
    const onSubmit = () => {
      message.success({ content: '开发中！' })
    }
    const onSubmitUpdate = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formRef.value.validate().then(() => {
        WorkTicketApi.update(formValue).then((response: ResultModel) => {
          message.success({ content: '更新成功！' })
          console.log(response)
        })
      }).catch((error: ValidateErrorEntity<WorkTicketModel>) => {
        console.log(error)
      })
    }
    const onFinish = () => {
      console.log('onFinish!', JSON.stringify(formValue))
    }
    const rules = {
      formWorkTicketTypeCode: [
        { required: true, message: '请选择工作场所！-测试', trigger: 'blur' }
      ],
      workTicketCode: [
        { required: true, message: '编号不能为空！', trigger: 'blur' }
      ],
      workLeader: [
        { required: true, message: '工作负责人不能为空！', trigger: 'blur' }
      ]
    }
    const resetForm = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formRef.value.resetFields()
    }
    return {
      formRef,
      formState,
      resetForm,
      onSubmit,
      onSubmitUpdate,
      onFinish,
      rules
    }
  },
  beforeUnmount () {
    this.resetForm()
  }
})
</script>
<style scoped lang="less">
@import "work-ticket-form.less";
</style>
